<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
</head>
<body>

<div id="outer" style="width: 300px;height: 300px;background-color: skyblue" data-id="outer">
	<div id="inner" style="background-color: #b9ca4a;width: 100px;height: 100px;position: relative; top: 200px
" data-id="inner">
	</div>

</div>
<script>
  window.onload = function () {
    //useCapture:true   捕获阶段执行
    //useCapture:false
    document.getElementById('outer').addEventListener('click', function (event) {
      console.log('outer')
    },false)
    // 即使内部的inner没有绑定事件 浏览器依然会向外查找对应的事件去触发
    // 只有相关的事件会触发，不相关的事件不影响。
    document.getElementById('inner').addEventListener('click',function (ev) {
      console.log(ev.target.getAttribute('data-id'))
      // 注意 冒泡事件要写在内部
      //  ev.stopPropagation();
    })
  }
  function compose (f, g) {
	return function (num) {
	  return 33
    }
  }
  var f = compose(function (x) {
    return x+3
  },function (x) {
    return x*3
  })
	f(10)
</script>
</body>
</html>